<template>
	<div class="aner">
		<div class="aner_header">
			<div class="aner_header_left">
				<i class="iconfont">&#xe610;</i>
				<input type="text" placeholder="圣诞" />
			</div>
			<div class="aner_header_right">
				<router-link to="/">取消</router-link>
			</div>
		</div>
		<!--  -->
		<p>搜索推荐</p>
		<div class="aner_bottom swiper">
			<ul class="swiper-wrapper">
				<li v-for="item in anerList" :key="item.id" class="swiper-slide">
					<img :src="item.imgURL" />
					<span>冰雪摄影</span>
					<span>冬季摄影师的最爱</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

//
export default{
	name:'Aner',
	data(){
		return{
			anerList : [
				{id:1,imgURL:'anerimg/anerimg-01.jpg',title:'1',msg:'1'},
				{id:2,imgURL:'anerimg/anerimg-02.jpg',title:'2',msg:'2'},
				{id:3,imgURL:'anerimg/anerimg-03.jpg',title:'3',msg:'3'},
				{id:4,imgURL:'anerimg/anerimg-04.jpg',title:'4',msg:'4'},
				{id:5,imgURL:'anerimg/anerimg-05.jpg',title:'5',msg:'5'},
				{id:6,imgURL:'anerimg/anerimg-06.jpg',title:'6',msg:'6'},
			]
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.aner_bottom' , {
				//循环播放
				slidesPerView : 2.9
			} )
		} )
	},
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
}
a{
	color: black;
}
.aner{
	
}
.aner p{
	font-size: 0.35rem;
	line-height: 1rem;
	text-indent: 1em;
	color: gray;
}
.aner_header{
	width: 93%;
	height: 1.2rem;
	line-height: 1rem;
	display: -webkit-inline-flex;
    justify-content: space-between;
    align-items: center;
	padding: 0 0.31rem 0 0.31rem;
	background: #f4f4f4;
}
.aner_header_left{
	width: 8rem;
	height: 0.8rem;
	background: #fff;
	border: 0.01rem solid #ddd;
	border-radius: 0.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.aner_header_left i{
	width: 10%;
	text-align: right;
}
.aner_header_left input[type="text"]{
	text-indent: 0.5em;
	width: 80%;
	height: 100%;
	border: none;
	outline: none;
}
.aner_header_right{
	margin-right: 0.2rem;
	font-size: 0.4rem;
}
.aner_bottom{
	/* border: 1px solid black; */
	overflow: hidden;
}
.aner_bottom p{
	line-height: 1rem;
	font-size: 0.4rem;
	text-indent: 0.8em;
	border: 1px solid #000000;
}
.aner_bottom ul{
	margin-left: 0.5rem;
	border-bottom: 0.01rem solid #eee;
}
.aner_bottom ul li{
	text-align: left;
}
.aner_bottom ul span:nth-child(2){
	display: block;
	line-height: 0.5rem;
	font-weight: bold;
	font-size: 0.36rem;
}
.aner_bottom ul span:nth-child(3){
	display: block;
	height: 0.9rem;
	line-height: 0.3rem;
	color: gray;
}
.aner_bottom ul li img{
	width: 3.2rem;
	height: 1.8rem;
	border-radius: 0.1rem;
}
</style>
